<template>
  <div class="home-view">
    <ElContainer>
        <!--    顶部条和用户信息 -->
        <ElHeader style="height: 60px;width: 100%;position: relative;border-bottom: 1px solid #ECECEC;display: flex;align-items: center;">
          <div>
            <div id="u2686"><img src="public/u2686.svg" alt=""></div>
            <div id="u2687" class=""></div>
            <div  id="u2688" ><img src="public/u2688.svg" alt=""></div>
          </div>
          <p id="u2689"><span style="font-size: 23px;">病案管理系统</span></p>
        </ElHeader>
      <ElContainer>
        <!-- 左侧菜单栏 -->
        <ElAside style="width:236px;box-sizing: border-box;">
          <!-- unique-opened属性是为了防止菜单栏的子菜单同时展开，只保留一个展开的子菜单。 router属性是为了实现菜单栏的路由跳转。   -->
          <ElMenu  background-color="#fff" text-color="#252525" active-text-color="#1270FF" style="height: 100%;" unique-opened router @select="selectMenu">
            <ElMenuItem index="/index">
              <ElIcon style="font-size: 21px;margin-right: 10px;"><Menu /></ElIcon>
              <span>首页</span>
            </ElMenuItem>
            <ElSubMenu index="1">
              <template #title>
                <ElIcon style="font-size: 21px;"><Menu /></ElIcon>
                <span>病案管理</span>
              </template>
              <ElMenuItem index="/record/medicalHome">住院病案首页管理</ElMenuItem>
            </ElSubMenu>
            <ElSubMenu index="2">
              <template #title>
                <ElIcon style="font-size: 21px;"><Menu /></ElIcon>
                <span>病案复印管理</span>
              </template>
              <ElMenuItem index="/duplicate/medicalDuplicate">住院病案复印管理</ElMenuItem>
              <ElMenuItem index="/duplicate/basicInformation">基础信息管理</ElMenuItem>
              <ElMenuItem index="/duplicate/copyingPurposes">复印用途模板管理</ElMenuItem>
              <ElMenuItem index="/duplicate/copyContent">复印内容管理</ElMenuItem>
            </ElSubMenu>
            <ElSubMenu index="3">
              <template #title>
                <ElIcon style="font-size: 21px;"><Menu /></ElIcon>
                <span>病案借阅管理</span>
              </template>
              <ElMenuItem index="/lending/lendingRegister">借阅登记</ElMenuItem>
              <ElMenuItem index="/lending/borrowingAudit">借阅审核出库</ElMenuItem>
              <ElMenuItem index="/lending/borrowingReturn">借阅病案归还</ElMenuItem>
            </ElSubMenu>

            <ElSubMenu index="4">
              <template #title>
                <ElIcon style="font-size: 21px;"><Menu /></ElIcon>
                <span>病案统计分析</span>
              </template>
              <ElMenuItem index="/statistics/duplicateStatistical">住院病案复印统计</ElMenuItem>
              <ElMenuItem index="/statistics/lendingRegisterStatistical">借阅登记统计</ElMenuItem>
              <ElMenuItem index="/statistics/returnRegisterStatistical">病案归还统计</ElMenuItem>
            </ElSubMenu>
            <ElSubMenu index="5">
              <template #title>
                <ElIcon style="font-size: 21px;"><Menu /></ElIcon>
                <span>费用管理</span>
              </template>
              <ElMenuItem index="/expense/duplicateExpense">住院复印费用查询</ElMenuItem>
              <ElMenuItem index="/expense/monthlyBills">月度账单统计查询</ElMenuItem>
            </ElSubMenu>
            <ElSubMenu index="6">
              <template #title>
                <ElIcon style="font-size: 21px;"><Menu /></ElIcon>
                <span>系统管理</span>
              </template>
              <ElMenuItem index="/system/dictionary">字典管理</ElMenuItem>
              <ElMenuItem index="/system/classificationDiseases">ICD-10管理</ElMenuItem>
              <ElMenuItem index="/system/answersQuestionView">问答管理</ElMenuItem>
              <ElMenuItem index="/system/user">角色管理</ElMenuItem>
              <ElMenuItem index="/system/loginLog">登录日志</ElMenuItem>
            </ElSubMenu>
          </ElMenu>
        </ElAside>

        <ElMain style="height: 90vh;padding: 0;overflow-y: auto;position: relative;">
          <!--      面包屑导航-->
          <div style="height:70px;margin-left:0;width:100%;background-color: #F0F2F5;">
            <ElBreadcrumb separator="/" style="line-height: 70px;">
              <ElBreadcrumbItem v-for="item in breadcrumb">{{item}}</ElBreadcrumbItem>
            </ElBreadcrumb>
          </div>
          <router-view/>
        </ElMain>
      </ElContainer>
    </ElContainer>
  </div>
</template>

<script setup>

import {ref} from "vue";


const breadcrumb = ref(['首页']);

// 在加载页面时检查 localStorage 并设置默认值
const breadcrumbItem = localStorage.getItem('breadcrumb');
try {
  if (breadcrumbItem) {
    const parsedBreadcrumb = JSON.parse(breadcrumbItem);
    if (Array.isArray(parsedBreadcrumb)) {
      breadcrumb.value = parsedBreadcrumb;
    }
  }
} catch (error) {
  breadcrumb.value = [];
}

// 菜单选择时的处理函数
const selectMenu = (index, indexPath) => {
  let breadcrumbData = [];
  if (map[index]) {
    breadcrumbData = map[index];
  } else if (indexPath && indexPath.length > 0) {
    breadcrumbData = indexPath.map(item => item.title).filter(Boolean);
  }

  breadcrumb.value = breadcrumbData;
  localStorage.setItem('breadcrumb', JSON.stringify(breadcrumbData));
};

let map = {
  "/index": ["首页"],
  "/record/medicalHome": ["病案管理", "住院病案首页管理"],
  "/duplicate/medicalDuplicate": ["病案复印管理", "住院病案复印管理"],
  "/duplicate/basicInformation": ["病案复印管理", "基础信息管理"],
  "/duplicate/copyingPurposes": ["病案复印管理", "复印用途模板管理"],
  "/duplicate/copyContent": ["病案复印管理","复印内容管理"],
  "/lending/lendingRegister": ["病案借阅管理","借阅登记"],
  "/lending/borrowingAudit": ["病案借阅管理", "借阅审核出库"],
  "/lending/borrowingReturn": ["病案借阅管理", "借阅病案归还"],
  "/statistics/duplicateStatistical": ["病案分析统计", "住院病案复印统计"],
  "/statistics/lendingRegisterStatistical": ["病案分析统计", "借阅登记统计"],
  "/statistics/returnRegisterStatistical": ["病案统计分析", "病案归还统计"],
  "/expense/duplicateExpense": ["费用管理", "住院复印费用查询"],
  "/expense/monthlyBills": ["费用管理", "月度账单统计查询"],
  "/system/dictionary": ["系统管理", "字典管理"],
  "/system/classificationDiseases": ["系统管理", "ICD-10管理"],
  "/system/answersQuestionView": ["系统管理", "问答管理"],
  "/system/user": ["系统管理", "角色管理"],
  "/system/loginLog": ["系统管理", "登录日志"]
}





</script>

<style scoped>
.home-view {
  display: flex;
}

#u2687{
  position:absolute;
  left:15px;
  top:26px;
  width:15px;
  height:15px;
  background:inherit;
  background-color:rgba(0, 167, 111, 1);
  box-sizing:border-box;
  border-width:1px;
  border-style:solid;
  border-color:rgba(0, 167, 111, 1);
}

#u2686{
  width: 15px;
  height: 15px;
  background-color: #18CCD0;
  position: absolute;
  left: 32px;
  top: 26px;
  border-radius: 50%;
}

#u2688{
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid #0368FF;
  position: absolute;
  left: 22px;
  top: 10px;
}

#u2689 {
  width:139px;
  height:32px;
  display:flex;
  font-family:'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
  font-weight:700;
  font-style:normal;
  font-size:23px;
  color:#000000;
  margin-left: 37px;
}

span{
  font-size: 18px;
}


</style>
